<template>
	<view class="payment-modal">
		<view class="modal-bg"></view>
		<view class="modal-box animated fast" :class="show ? 'slideInUp' : 'slideOutDown'">
			<view class="modal-main"> 
				<view class="closed"><text @click="closed()" class="iconfont  ft20 cl-notice iconbtn_close"></text></view>
				<view class="lh20 ft16 cl-main ftw600 text-center">取消订单</view>
				<view class=" pd16_15">
					<radio-group @change="changeType" style="width: 100%;">
						<view class="box pd16_15 flex alcenter space" v-for="(item,index) in cancelTitle" :key="index">
							<view class="flex alcenter">
								<text class="ml15 ft14 ftw500 cl-main">{{item.name}}</text>
							</view>
							<view>
								<radio :value="item.value" :checked="payType == item.value" :disabled="false" :color="tempColor" /></view>
						</view>
					</radio-group>
				</view>
			</view>
			<view class="bg-w mt16 pd10_15" style="box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);">
				<button class="btn-big" :style="getBtnStyle" @tap="cancelOrder">取消订单</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {},
	data() {
		return {
			cancelTitle:[{name:"联系不上客户",value:"quhuo"},{name:"客户要求退款",value:"tuikuan"},{name:"客户未到店",value:"daodian"}],
			payType: 'quhuo',
			show: false,
			title:'联系不上客户',
			index:0
		};
	},
	created() {
		this.show = true;
	},
	methods: {
		changeType(e) {
			this.payType = e.detail.value;
			this.cancelTitle.forEach((item,index)=>{
				if(item.value == this.payType){
					this.title = item.name;
				}
			})
		},
		cancelOrder(){
			this.show = false;
			setTimeout(() => {
				this.$emit('cancel',this.title);
			}, 400);
		},
		closed() {
			this.show = false;
			setTimeout(() => {
				this.$emit('closed');
			}, 400);
		}
	}
};
</script>

<style>
.payment-modal {
	position: relative;
	z-index: 400;
}
.payment-modal .modal-bg {
	position: fixed;
	z-index: 400;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
}
.payment-modal .modal-box {
	position: fixed;
	z-index: 401;
	background: #ffffff;
	left: 0;
	bottom: 0;
	width: 100%;
	padding-bottom: 0rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	border-radius: 32rpx 32rpx 0rpx 0rpx;
}
.payment-modal .modal-main {
	position: relative;
	height: auto;
	overflow: hidden;
	padding-top: 64rpx;
}
.payment-modal .modal-main .closed {
	position: absolute;
	right: 40rpx;
	top: 40rpx;
}
</style>
